<script setup lang="ts">
defineOptions({
  // eslint-disable-next-line vue/no-reserved-component-names
  name: "Dashboard",
  inheritAttrs: false,
});

import moment from "moment"
import { useUserStore } from "@/store/modules/user";
import { useTransition, TransitionPresets } from "@vueuse/core";
import {Audit, Income, MonthMoney, BillAgeAmount, SaleAmount} from "@/api/dashboard/types";

/**
 * 待办事项
 */
const audit = reactive<Audit>({
  total: '100',
  finance: '10',
  client: '30',
  warehouse: '30',
  other: '30',
})
/**
 * 期初应收
 */
const income = reactive<Income>({
  total: '19975.56',
  tm: '1577.33',
  jd: '1873.44',
  dy: '1774.88',
  ks: '1994.23',
  other: '2776.15',
})
/**
 * 应收周期
 */
const incomeCircle = reactive<Income>({
  total: '27764.56',
  tm: '2677.33',
  jd: '1899.44',
  dy: '3641.88',
  ks: '1890.23',
  other: '2777.15',
})
/**
 * 本期发生
 */
const current = reactive<Income>({
  total: '19977.56',
  tm: '1677.33',
  jd: '2880.44',
  dy: '355.00',
  ks: '0',
  other: '144',
})
/**
 * 销售金额
 */
const sell = reactive<Income>({
  total: '37796.56',
  tm: '2874.33',
  jd: '5478.00',
  dy: '669.00',
  ks: '1904.03',
  other: '5212.44',
})
/**
 * 平台佣金
 */
const commission = reactive<Income>({
  total: '7780.22',
  tm: '1399.56',
  jd: '4382.11',
  dy: '8891.00',
  ks: '2213.00',
  other: '123.00',
})
/**
 * 营销费用
 */
const market = reactive<Income>({
  total: '553134.89',
  tm: '12980.71',
  jd: '8989.66',
  dy: '10784.23',
  ks: '35501.00',
  other: '5549.53',
})
/**
 * 平台利润
 */
const profit = reactive<Income>({
  total: '43559.12',
  tm: '23481.87',
  jd: '4412.90',
  dy: '5688.77',
  ks: '8970.34',
  other: '2845.61',
})

const data = reactive<MonthMoney>({
	wqrje: '634285.42',
	currentMonth: {
		month: '本月',
		qrsrje: '213424.53',
		yqrje: '12376.00',
		jtkje: '412.50',
		tkje: '968.77',
	},
	lastMonth: {
	  month: '9月',
	  qrsrje: '174678.53',
	  yqrje: '224823.00',
	  jtkje: '4123.50',
	  tkje: '1689.77',
	},
	llMonth: {
	  month: '8月',
	  qrsrje: '469743.53',
	  yqrje: '654454.00',
	  jtkje: '7311.50',
	  tkje: '3458.79',
	},
})

const billAge = reactive<BillAgeAmount>({
	balance: '2546832.77',
	month2: '1568990.54',
	month3: '336571.25',
	halfYear: '159903.90',
	year: '84216.43',
	years: '29087.89',
})

const lastMonthAmount = reactive<SaleAmount>({
		total: '15534590.21',
		mall: '5105432.77',
		selfCash: '10429157.44'
})
const lastMonthSettlementAmount = reactive<SaleAmount>({
		total: '7533813.56',
		mall: '533590.23',
		selfCash: '7000223.33'
})
const lastMonthRentAmount = reactive<SaleAmount>({
		total: '2008614.78',
		mall: '1029071.56',
		selfCash: '979543.22'
})
const lastMonthOtherAmount = reactive<SaleAmount>({
		total: '1009025.11',
		mall: '512778.42',
		selfCash: '496246.69'
})



const userStore = useUserStore();

const date: Date = new Date();
const total = ref('1000.00')

const greetings = computed(() => {
  if (date.getHours() >= 6 && date.getHours() < 8) {
    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
  } else if (date.getHours() >= 8 && date.getHours() < 12) {
    return "上午好🌞！";
  } else if (date.getHours() >= 12 && date.getHours() < 18) {
    return "下午好☕！";
  } else if (date.getHours() >= 18 && date.getHours() < 24) {
    return "晚上好🌃！";
  } else if (date.getHours() >= 0 && date.getHours() < 6) {
    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
  }
});

const duration = 5000;

// 收入金额
const amount = ref(0);
const amountOutput = useTransition(amount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
amount.value = 2000;

// 访问数
const visitCount = ref(0);
const visitCountOutput = useTransition(visitCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
visitCount.value = 2000;

//消息数
const messageCount = ref(0);
const messageCountOutput = useTransition(messageCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});
messageCount.value = 2000;

// 订单数
const orderCount = ref(0);
const orderCountOutput = useTransition(orderCount, {
  duration: duration,
  transition: TransitionPresets.easeOutExpo,
});

function format_money(money: any) {
  const splitMoney = (money + '').replace(/\B(?=(\d{3})+(?!\d))/g, ',').split('.')
  if (splitMoney.length > 1) {
    return `${splitMoney[0]}.<span style="font-size:12px;display: contents;">${splitMoney[1]}</span>`;
  }else{
    return `${splitMoney[0]}`;
  }
}

orderCount.value = 2000;

</script>

<template>
	<div class="dashboard-container">
	  <div style="width: 100%; height: 100%; display: inline-block; float: left;">
		  <div class="data-box-left" style="height: 100%">
		  <div style="height: 8px;">
			  <div style="width:100%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;margin-left:5px;">
				  应收账龄
			  </div>
		  </div>
		  <div style="margin-top: 25px;">
				<!--应收余额-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">应收余额</span>
						</div>
					</template>
					<div v-html="format_money(billAge.balance)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">

					</div>
				</el-card>
				<!--两个月内-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">两个月内</span>
						</div>
					</template>
					<div v-html="format_money(billAge.month2)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">
					</div>
				</el-card>
				<!--三个月内-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">三个月内</span>
						</div>
					</template>
					<div v-html="format_money(billAge.month3)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">

					</div>
				</el-card>
				<!--半年内-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">半年内</span>
						</div>
					</template>
					<div v-html="format_money(billAge.halfYear)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">

					</div>
				</el-card>
				<!--一年内-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">一年内</span>
						</div>
					</template>
					<div v-html="format_money(billAge.year)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">
					</div>
				</el-card>
				<!--一年以上-->
				<el-card shadow="always" body-style="" class="inner-card">
					<template #header>
						<div class="card-header" style="text-align: left;">
							<span style="font-weight: bold;">一年以上</span>
						</div>
					</template>
					<div v-html="format_money(billAge.years)" class="text-center text-red text-bold number-div" style="height: 42px;display: flex;align-items: center;justify-content: center">

					</div>
				</el-card>
		  </div>
			</div>
		</div>
		<!--上月销售-->
	  <div class="sale-card">
		  <div class="data-box-left" style="height: 100%">
			  <div style="height: 8px;">
				  <div style="width:100%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;margin-left:5px;">
					  上月销售&nbsp;&nbsp;&nbsp;
						<div class="number-div text-center text-red text-bold" style="height: 100%;float: left;display: flex;justify-content: left;align-items: center;font-weight: bold;" v-html="format_money(lastMonthAmount.total)"></div>
				  </div>
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">商场店</div>
					  <div v-html="format_money(lastMonthAmount.mall)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
			  <div style="width: 20%;float: left;margin-top: 20px">
				  <el-divider direction="vertical" />
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">自收银</div>
					  <div v-html="format_money(lastMonthAmount.selfCash)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
		  </div>
	  </div>
		<!--上月结算-->
	  <div class="sale-card">
		  <div class="data-box-left" style="height: 100%">
			  <div style="height: 8px;">
				  <div style="width:100%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;margin-left:5px;">
			  		上月结算&nbsp;&nbsp;&nbsp;
						<div class="number-div text-center text-red text-bold" style="height: 100%;float: left;display: flex;justify-content: left;align-items: center;font-weight: bold;" v-html="format_money(lastMonthSettlementAmount.total)"></div>
				  </div>
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">商场店</div>
					  <div v-html="format_money(lastMonthSettlementAmount.mall)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
			  <div style="width: 20%;float: left;margin-top: 20px">
				  <el-divider direction="vertical" />
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">自收银</div>
					  <div v-html="format_money(lastMonthSettlementAmount.selfCash)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
		  </div>
	  </div>
		<!--上月租金-->
	  <div class="sale-card">
		  <div class="data-box-left" style="height: 100%">
			  <div style="height: 8px;">
				  <div style="width:100%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;margin-left:5px;">
			  		上月租金&nbsp;&nbsp;&nbsp;
						<div class="number-div text-center text-red text-bold" style="height: 100%;float: left;display: flex;justify-content: left;align-items: center;font-weight: bold;" v-html="format_money(lastMonthRentAmount.total)"></div>
				  </div>
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">商场店</div>
					  <div v-html="format_money(lastMonthRentAmount.mall)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
			  <div style="width: 20%;float: left;margin-top: 20px">
				  <el-divider direction="vertical" />
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">自收银</div>
					  <div v-html="format_money(lastMonthRentAmount.selfCash)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
		  </div>
	  </div>
		<!--上月其他费用-->
	  <div class="sale-card" style="margin-right: 0; float: right;">
		  <div class="data-box-left" style="height: 100%">
			  <div style="height: 8px;">
				  <div style="width:100%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;margin-left:5px;">
			  		上月其他费用&nbsp;&nbsp;&nbsp;
						<div class="number-div text-center text-red text-bold" style="height: 100%;float: left;display: flex;justify-content: left;align-items: center;font-weight: bold;" v-html="format_money(lastMonthOtherAmount.total)"></div>
				  </div>
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">商场店</div>
					  <div v-html="format_money(lastMonthOtherAmount.mall)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
			  <div style="width: 20%;float: left;margin-top: 20px">
				  <el-divider direction="vertical" />
			  </div>
				  <div style="width: 40%;float: left;margin-top: 20px">
					  <div class="text-center">自收银</div>
					  <div v-html="format_money(lastMonthOtherAmount.selfCash)" class="text-center text-red text-bold number-div" style="margin-top: 10px">

					  </div>
				  </div>
		  </div>
	  </div>
	</div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 10px;
  }

  .data-box-left {
		color: var(--el-text-color-regular);
		background: var(--el-bg-color-overlay);
		border-color: var(--el-border-color);
		box-shadow: var(--el-box-shadow-dark);
		border-radius: 10px;
		padding: 20px;
		text-align:center;
		min-height: 1em;
		overflow: auto;
  }

  .data-box-right {
		color: var(--el-text-color-regular);
		background: var(--el-bg-color-overlay);
		border-color: var(--el-border-color);
		box-shadow: var(--el-box-shadow-dark);
		border-radius: 10px;
		padding: 20px;
		min-height: 1em;
		overflow: auto;
  }

  .left-data-box-item {
		width:25%;
		float: left;
		height: 70px;
  }


  .left-data-box-item .content{
	margin:0 auto;
	height: 100%;
	width: 30%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
  }

	.data-box-item {
		width:16%;
		height:70px;
		float: left;
	}

	.content{
	margin:0 auto;
	height: 100%;
	width: 40%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
	}

	.data-box-item .content{
		margin:0 auto;
		height: 100%;
		width: 40%;overflow: hidden;display: flex;align-items: center;border-radius: 10px;
	}

	.data-box-item .logo {
		text-align: center;height: 77%
	}

	.sum-header {
		line-height: 35px;vertical-align: middle;
		font-weight:bold;
	}

	.sum-text{
		vertical-align: middle;font-weight: bold;
	}

	.common-title{
	text-align: center;height: 100%;
	transition: transform .2s;
	font-weight: bold;display: flex;justify-content: center;align-items: center;
	}

	.number-div{
		text-align: center;height: 100%;
		transition: transform .2s;
		&:hover {
			-ms-transform: scale(1.1); /* IE 9 */
			-webkit-transform: scale(1.1); /* Safari 3-8 */
			transform: scale(1.1);
			color: #f5222d;
			cursor: pointer;
		}
	}

	.sum-number {
		line-height: 70px;vertical-align: middle;
		font-weight: bold;
	}

  .sum-title {
	line-height: 70px;vertical-align: middle;font-weight: bold;
  }

  .svg-icon {
    fill: currentcolor !important;
  }

  .data-box-qcys {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
    border-radius: 3%;
    height: 100%;
  }

  .qcys-img{
    max-width: 100%;
    height: auto;
    position: absolute;
  }

  .el-divider--horizontal {
	display: block;
	height: 1px;
	width: 100%;
	margin: 12px 0;
	border-top: 1px var(--el-border-color) var(--el-border-style);
  }

	.logo-img {
		width:40%;height: 100%;float: left;
	}
	.logo-title{
		width:60%;height: 100%;float: left;text-align: left;display: flex;justify-content: left;align-items: center;font-weight: bold;font-size: 15px;
	}
	.inner-card{
		width: 16%;float: left;margin-bottom: 20px;border-radius: 10px;margin-right: 0.66%;
	}
  .box-card{
	margin-bottom: 10px;
  }
  .text-center{
	text-align: center;
  }
  .text-red{
	color:red;
  }
  .text-bold{
	font-weight: bold;
  }
  .tooltip-base-box .box-item {
	width: 110px;
	margin-top: 10px;
	background-color: red;
  }

  .info-pos{
	display: flex;align-items: center;justify-content: space-between;
  }
	.sale-card{
	width: 24%; height: 100%; display: inline-block; float: left;margin-top: 20px;margin-right: 1.3%;
	}
	.el-divider--vertical{
		height: 3em;
	}
}
</style>
